<template>
  <!-- 投保人信息（主被保人） -->
  <div class="mt-[30px] flex items-center">
    <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
    <div class="ml-[10px] text-[#EF6800] font-bold" style="font-size: 16px">
      投保人信息
    </div>
  </div>

  <div class="mt-[30px] flex" v-if="!disabled">
    <!-- <div style="font-size: 14px">投保人类型</div>
    <div class="flex">
      <div class="ml-[40px] flex items-center" @click="clicktab(0)">
        <el-image v-if="type == 0" :src="getAssetsFile('home/active.png')"
          class="w-[18px] h-[18px] cursor-pointer"></el-image>
        <el-image v-else :src="getAssetsFile('home/noactive.png')" class="w-[18px] h-[18px] cursor-pointer"></el-image>
        <div class="ml-[10px]">单位</div>
      </div>
      <div class="ml-[40px] flex items-center" @click="clicktab(1)">
        <el-image v-if="type == 1" :src="getAssetsFile('home/active.png')"
          class="w-[18px] h-[18px] cursor-pointer"></el-image>
        <el-image v-else :src="getAssetsFile('home/noactive.png')" class="w-[18px] h-[18px] cursor-pointer"></el-image>
        <div class="ml-[10px]">个人</div>
      </div>
    </div> -->
  </div>

  <div class="flex flex-wrap mt-[30px] w-full justify-between">
    <div class="w-[50%]">
      <el-form-item :label="name" prop="name">
        <el-input
          @change="inputChange"
          :disabled="disabled"
          placeholder="请输入名称"
          v-model="Info.name"
          style="width: 20vw"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
    <div class="w-[50%]">
      <el-form-item label="证件类型" prop="name">
        <!-- <el-input
          placeholder="请输入单位名称"
          style="width: 20vw"
          class="w-[318px]"
        ></el-input> -->
        <el-select
          :disabled="disabled"
          v-model="Info.card_type"
          placeholder="请选择证件类型"
          style="width: 20vw"
          @change="selectChange"
        >
          <el-option
            v-for="(items, key) in list"
            :key="key"
            :label="items"
            :value="items"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="w-[50%]" v-if="type == 0">
      <el-form-item label="联系人姓名" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="请输入联系人姓名"
          v-model="Info.contact"
          style="width: 20vw"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
    <div class="w-[50%]">
      <el-form-item label="证件号码" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="请输入相应证件号码"
          style="width: 20vw"
          v-model="Info.card_no"
          class="w-[318px]"
          @blur="cardBlur"
        ></el-input>
      </el-form-item>
    </div>
    <div class="w-[50%]">
      <el-form-item label="手机号码" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="请输入手机号码"
          v-model="Info.contact_mobile"
          style="width: 20vw"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
    <div class="w-[50%]">
      <el-form-item label="邮箱" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="请输入邮箱"
          style="width: 20vw"
          v-model="Info.mailbox"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
    <div class="w-[50%]" v-if="false">
      <el-form-item label="投保区域地址" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="投保区域地址"
          style="width: 20vw"
          v-model="Info.address"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
  </div>
  <!-- <div class="flex">
    <el-form-item label="地址" prop="name">
      <div class="flex">
        <el-cascader
          v-model="addressValue"
          :disabled="disabled"
          :options="regionData"
          style="width: 20vw"
          class="w-[318px]"
          @change="cascaderChange"
        />
      </div>
    </el-form-item>
    <div class="ml-[170px]">
      <el-form-item label="详细地址" prop="name">
        <el-input
          :disabled="disabled"
          placeholder="请输入"
          v-model="addInfo.address"
          style="width: 20vw"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
    </div>
  </div> -->
</template>
<script setup lang="ts">
import {
  defineProps,
  watchEffect,
  ref,
  reactive,
  defineExpose,
  onMounted,
  ComputedRef,
  computed,
  inject,
} from "vue";
import { homeGetAddress, getBusiness, getBusinessInfo } from "@/utils/api";
import { regionData, CodeToText } from "element-china-area-data";
import getAssetsFile from "@/utils/getImageurl.ts";
import { useRoute } from "vue-router";
const props = defineProps({
  cardType: { type: Array<string> }, //单位证件类型
  cardTypeTwo: { type: Array<string> }, //个人证件类型
  insure: { type: Object },
  disabled: { type: Boolean, default: false },
  addInfo: { type: Object },
});
const message = inject("message") as any;
const route = useRoute();
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
const list = ref<Array<string>>([]);
const name = ref("单位名称");
const searchName = ref();
const type = ref(0);
interface InfoType {
  name: string;
  card_type: string;
  card_no: string;
  contact: string;
  contact_mobile: string;
  mailbox: string;
  insure_type: string;
  address: string
}
const Info = reactive<InfoType>({
  name: "",
  card_type: "统一社会信用代码",
  card_no: "",
  contact: "",
  contact_mobile: "",
  mailbox: "",
  insure_type: "",
  address: ""
});
// const addressValue = ref<Array<any>>([]);
const addInfo = reactive<addInfoType>({
  province: "",
  city: "",
  area: "",
  address: "",
  province_code: "",
  city_code: "",
  area_code: "",
});
watchEffect(() => {
  if (props.insure) {
    if (props.insure.insure_type == "个人") {
      type.value = 1;
      Info.insure_type = "个人";
      list.value = props.cardTypeTwo as any;
      name.value = "姓名";
    } else {
      type.value = 0;
      Info.insure_type = "单位";
      list.value = props.cardType as any;
      name.value = "单位名称";
    }
    let key: keyof InfoType;
    if (props.insure.name == "") return;
    for (key in Info) {
      Info[key] = props.insure[key];
    }
  }

  // if (props.addInfo) {
  //   let key: keyof addInfoType;
  //   for (key in addInfo) {
  //     addInfo[key] = props.addInfo[key];
  //   }

  //   addressValue.value = [
  //     props.addInfo.province_code,
  //     props.addInfo.city_code,
  //     props.addInfo.area_code,
  //   ];
  // }
});
interface LinkItem {
  value: string;
  link: string;
}
onMounted(() => {
  if (props.cardType) {
    list.value = props.cardType;
    Info.card_type = props.cardType[0];
    // Info.card_type = sleectName.value;
  }
});
const inputChange = async () => {

  if (type.value == 0) {
    const res = await getBusinessInfo({ name: Info.name });
    if (res.code == 1) {
      let i: keyof InfoType
      for (i in Info) {
        if (res.msg[i]) {
          Info[i] = res.msg[i]
        }
      }
    }
  }

}
const links = ref<any>([]);
let timeout: ReturnType<typeof setTimeout>;
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  clearTimeout(timeout);
  timeout = setTimeout(async () => {
    const res = await getBusiness({ name: queryString });
    links.value = res.msg.map((t: any) => {
      return {
        value: t.companyName,
        code: t.creditNo,
      };
    });

    cb(links.value);
  }, 1000);
};
//身份证号码失去焦点验证
const cardBlur = () => {
  if (Info.card_no.length < 18 && type.value == 1) {
    message.warning("身份证号码错误");
  }
};
const handleSelect = (item: Record<string, any>) => {
  Info.card_no = item.code;
};
const hangleChange = (v: any) => {
  searchName.value = v;
};
const selectChange = (_: any) => {
  // console.log(val);
};
//选择被保人类型
const clicktab = (index: number) => {
  //0是单位1是个人
  if (index == 0) {
    //单位
    name.value = "单位名称";
    list.value = props.cardType as any;
    Info.insure_type = "单位";
    Info.card_type = list.value[0];
  } else {
    //个人
    name.value = "姓名";
    list.value = props.cardTypeTwo as any;
    Info.insure_type = "个人";
    Info.card_type = list.value[0];
  }
  type.value = index;
  Info.name = "";
  Info.card_no = "";
};

// const cascaderChange = (value: any) => {
//   //code
//   addInfo.province_code = value[0];
//   addInfo.city_code = value[1];
//   addInfo.area_code = value[2];
//   addInfo.province = CodeToText[addInfo.province_code];
//   addInfo.city = CodeToText[addInfo.city_code];
//   addInfo.area = CodeToText[addInfo.area_code];
// };

defineExpose({
  Info,
  addInfo,
});
</script>
